<template>
    <div id="barGroupId"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            option: null,
            xAxis: [1, 3, 3, 4],
            data: [
                //          {
                //     name: '小客车',
                //     type: 'bar',
                //     stack: '周一',
                //     barWidth: '10%',
                //     data: [20, 30, 40, 60],
                //   },
                //   {
                //     name: '中型车',
                //     type: 'bar',
                //     stack: '周一',
                //     barWidth: '10%',
                //     data: [21, 30, 40, 60],
                //   },
                //   {
                //     name: '大型车',
                //     type: 'bar',
                //     stack: '周一',
                //     barWidth: '10%',
                //     data: [22, 30, 40, 60],
                //   },
                //   {
                //     name: '汽车列车',
                //     type: 'bar',
                //     stack: '周一',
                //     barWidth: '10%',
                //     data: [23, 30, 40, 60],
                //   }
            ]
        };
    },
    props: {
        chartData: Object,
    },
    watch: {
        chartData: {
            handler(newVal) {
                console.log(newVal);
                this.initStr();
            },
            deep: true,
        },
    },
    mounted() {
        this.initStr();
    },
    methods: {
        initStr() {
            this.option = {
                color: ['#7CA870', '#FFC53A', '#F5936F', '#F56C6C'],
                legend: {
                    data: ['小客车', '中型车', '大型车', '汽车列车']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: "{b0}<br/> {a0}: {c0}辆 <br/>{a1}: {c1}辆 <br/>{a2}: {c2}辆<br/>{a3}: {c3}辆 "
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: this.chartData.xAxisData,
                yAxis: [
                    {
                        type: 'value',
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: [
                                    'rgba(255, 255, 255, 0.1)',
                                    'rgba(204, 204, 204, 0.1)',
                                    'rgba(255, 255, 255, 0.1)',
                                    'rgba(204, 204, 204, 0.1)',
                                    'rgba(255, 255, 255, 0.1)',
                                    'rgba(204, 204, 204, 0.1)',
                                ]
                            }
                        },
                        axisLabel: {
                            formatter: '{value}辆',
                            fontSize: 25
                        }
                    }
                ],
                //                 dataZoom: {
                //     start: 20,// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围
                //     height: 10,// 组件的高度。指的不是滚动条本身，而是滚动条下面的组件。水平布局默认 30，竖直布局默认自适应。比 top 和 bottom 优先级高
                //     left: '10%',// 组件离容器左侧的距离
                //     right: '10%',// 组件离容器右侧的距离
                //     bottom: 2,// 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应
                //     startValue: 0,// 数据窗口范围的起始数值。如果设置了 dataZoom-slider.start 则 startValue 失效
                //     endValue: 6,// 很重要，页面展示的x轴数据量，6表示页面只有6+1=7条数据，总数据量超过7条滚动条就开始起作用了。数据窗口范围的结束数值。如果设置了 dataZoom-slider.end 则 endValue 失效
                //     show: true,// 很重要，是否显示组件。如果设置为false，滚动条就没有了，但是数据过滤的功能还存在。默认值是true
                //     realtime: true,// 很重要，拖动时，是否实时更新图表的视图。如果设置为 false，则只在拖拽结束的时候更新。默认值是true
                //     backgroundColor: '#ddd',// 组件的背景颜色
                //     handleStyle: {
                //       borderColor: '#cacaca',// 图形的描边颜色。支持的颜色格式同 color，不支持回调函数
                //       borderWidth: '5',// 描边线宽。为 0 时无描边
                //       shadowBlur: 2,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
                //       shadowColor: '#ddd',// 阴影颜色。也就是滚动条左右两个小点的颜色
                //     },
                //     showDataShadow: false,// 很重要，是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。默认值是auto，也就是有数据阴影
                //     showDetail: false,// 很重要，是否显示detail，即拖拽时候滚动条左右是否显示详细数据信息。默认值是true
                //     xAxisIndex: [0, 1],// 很重要，设置滚动条控制的x轴，[0,1]表示它控制了第一条和第二条x轴，[0]表现为第二条x轴没有滚动条，所有数据都会展示在页面
                //   },
                series: this.chartData.data
            };
            this.initBar(this.option);
        },
        initBar() {
            var element = document.getElementById('barGroupId');
            if (element) {
                let id = echarts.init(element);
                id.setOption(this.option);
                window.addEventListener("resize", id.resize);
            }

        }
    }
};
</script>

<style>
#barGroupId {
    height: 600px;
}
</style>